<template>
	<view class="container">
		<!--    <productConSwiper :imgUrls="imgUrls"></productConSwiper>-->
		<view class="swiper banner" >
			<!-- /:autoplay="true" -->
			<swiper indicator-dots="true"  :circular="circular" :interval="interval"
				:duration="duration" :autoplay="autoplay" indicator-color="#E4E4E4" indicator-active-color="#E93323" :current="swiperCur"
				@change="swiperChange">
				<block v-if="bannerImgs.length">
					<block v-for="(item, index) in bannerImgs" :key="index">
						<swiper-item :class="{ active: index == swiperCur }">
							<image :src="item" class="slide-image" mode="aspectFill"></image>
						</swiper-item>
					</block>
				</block>
				<block v-if="bannersVideos.length">
					<swiper-item v-for="(item, index) in bannersVideos">
						<video
							:src="item"
							controls></video>
					</swiper-item>
				</block>

			</swiper>
			<view class="current-box">
				{{current>bannerImgs.length?'视频':'图片'}}{{current}}/{{bannersVideos.length+bannerImgs.length}}
			</view>
			
		</view>
		<!-- 标题时间等相关信息 -->
		<view class="info">
			<view>
				<view class="name">{{detail.title}}</view>
				<view class="time_contact">
					<view class="time">开放时间：{{detail.open_time}}</view>
					<image @click="makeCall()" class="contact" src="../../../static/2images/call.png"></image>
				</view>
				<view class="address_bg">
					<view class="address" @click="goToMap()">
						<image class="address_icon" src="../../../static/2images/2_8.png"></image>
						{{detail.address}}
					</view>
					<view class="goto">
						<!-- <image class="to" src="../../../static/2images/share_vr.png"></image> -->
					</view>
				</view>
			</view>
		</view>
		<view class="ticket_list">
			<view class="item" v-for="item in detail.parts">
				<image class="cover" :src="item.cover"></image>
				<view class="right_info">
					<view class="title_bg">
						<view class="title">{{item.title}}</view>
						<view class="price" v-if="detail.is_open == 1">¥{{item.price}}</view>
						<view class="price gray" v-else>待定</view>
						<view class="desc">{{item.intro}}</view>
					</view>
					<view class="btn">
						<view class="buy" v-if="detail.is_open == 1" @click="gotoBuy(item,detail.title)">立即购买</view>
						<view class="not_buy" v-else >未开放</view>
					</view>
				</view>
			</view><!-- item end -->
		</view><!-- ticket_list end-->
		<view class="intro_bg" v-if="detail.content">
			<view class="title"><view class="text">乐园简介</view></view>
			<view class="content">
				<jyf-parser :domain="domain" :html="detail.content" ref="article"
					:tag-style="tagStyle"></jyf-parser>
			</view>
		</view><!-- intro_bg -->
		
		<view class="intro_bg" v-if="detail.know">
			<view class="title">
				<view class="text">注意事项</view>
			</view>
			<view class="content">
				<jyf-parser :domain="domain" :html="detail.know" ref="article"
					:tag-style="tagStyle"></jyf-parser>
			</view>
		</view><!-- intro_bg -->

		<!-- <view class="card-box">
			<view class="intro_bg">
				<view class="title">乐园简介</view>
			</view>
			<view class="content" v-if="detail.content">
				<jyf-parser :domain="domain" :html="detail.content" ref="article"
					:tag-style="tagStyle"></jyf-parser>
			</view>
		</view> -->
	</view>
</template>

<script>
	import productConSwiper from "@/components/productConSwiper/index.vue";
	import {
		HTTP_REQUEST_URL
	} from "@/config/app";
	import {
		performInfo
	} from "@/api/2_activity";
	import {water_info} from "@/api/water";
	const app = getApp();
	export default {
		components: {
			productConSwiper
		},
		data() {
			return {
				id: '',
				imgUrls: [],
				domain: HTTP_REQUEST_URL,
				description: '',
				tagStyle: {
					img: "width:100%;display:block;",
				},
				detail: {
					title:'',
					open_time:'',
					address:''
				},
				swiperCur: 0,
				circular: true,
				autoplay: false,
				interval: 3000,
				duration: 500,
				current: 1,
			};
		},
		computed: {
			bannersVideos() {
				if (JSON.stringify(this.detail) != '{}') {
					if (this.detail.video) {
						return [this.detail.video]
					}
				}
				return []
			},
			bannerImgs() {
				if (JSON.stringify(this.detail) != '{}' && this.detail.imgs) {
					let bs = this.detail.imgs.split(",")
					return bs
				}
				return []

			}
		},
		onLoad(options) {
			this.getData();
		},
		methods: {
			
			goToMap() {
				let {lat, lon, address} = this.detail
				if(lat && lon) {
					uni.openLocation({
				   　　latitude: Number(lat), 
				   　　longitude: Number(lon),
				   　　name: address,
				   　　success() {
					   　　console.log('success');
				   　　}
					});
				}
			},
			getData(){
				let that = this;
				uni.showLoading({
					title:'加载中'
				})
				water_info().then(res => {
					that.detail = res.data;
					uni.hideLoading();
				})
			},
			makeCall(){
				if(this.detail && this.detail.contact){
					uni.makePhoneCall({
					  phoneNumber: this.detail.contact
					});
				}
			},
			swiperChange(e) {
				this.current = e.detail.current + 1
				// console.log(e.detail.current);
			},
			gotoBuy(item,title){
				const jsonString = JSON.stringify(this.detail);
				 
				// 使用encodeURIComponent确保URL安全
				const jsonEncoded = encodeURIComponent(jsonString);
				uni.navigateTo({
					url:`/pages/2_development/water/confirm?data=${jsonEncoded}`
				})
			}
		}
	};
</script>

<style lang="scss">
	@import "../../index/style/main.scss";

	.container {
		// background-color: #aed8e9;
		background-color: #219fe6;
		padding-bottom: 0;
		padding-bottom: constant(safe-area-inset-bottom);  
		padding-bottom: env(safe-area-inset-bottom); 
	}

	.banner {
		height: 560rpx;
		width: 100%;
		position: relative;

		swiper {
			height: 100%;
			width: 100%;

			image,
			video {
				width: 100%;
				height: 100%;
			}

		}

		.current-box {
			position: absolute;
			right: 20rpx;
			bottom: 80rpx;
			background: rgba(0, 0, 0, .24);
			color: #fff;
			border-radius: 30px;
			padding: 2px 6px;
			font-size: 12px;
			display: none;
		}

	}

	.bnt {
		margin: 30rpx;
		padding-bottom: calc(10rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(10rpx + env(safe-area-inset-bottom));
	}

	.btns {
		text-align: center;
		line-height: 76rpx;
		color: #fff;
		font-size: 28rpx;
	}
	.bgcor{
		background-color:#0193ff;
	}

	.joinCart {
		flex: 1;
		border-radius: 50rpx 0 0 50rpx;
		background-image: linear-gradient(to right, #fea10f 0%, #fa8013 100%);
	}

	.buy {
		flex: 1;

		border-radius: 50rpx;
		// background-image: linear-gradient(to right, #fa6514 0%, #e93323 100%);
	}

	.users {
		padding-left: 30rpx;
		flex-wrap: wrap;
		/* #ifdef MP */
		margin-top: 0;
		/* #endif */
		/* #ifdef H5 */
		margin-top: 0;

		/* #endif */
		.avatar {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			width: 30%;
			margin-right: 3%;
			margin-top: 20rpx;

			height: 80rpx;
			width: 80rpx;
			border-radius: 40rpx;
			background: #eee;

			&.active {
				background: #999;
				color: #fff;
			}
		}
	}

	.attribute {
		background-color: #fff;
		padding: 0 30rpx;
		font-size: 26rpx;
		color: #82848f;
		height: 90rpx;
		position: relative;
	}

	.atterTxt {
		font-size: 28rpx;
		color: #282828;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		display: inline-block;
		// width: 400rpx;
		margin-left: 20rpx;
	}


	.info {
		position: relative;
		background: #fff;
		padding: 20rpx 30rpx;
		margin: 0rpx 30rpx;
		z-index: 999;
		margin-top: -50rpx;
		border-radius: 10rpx;

		.name {
			margin-top: 20rpx;
			font-size: 32rpx;
			font-weight: 700;
		}

		.time_contact{
			margin-top: 20rpx;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			.time{
				font-size: 28rpx;
				color: #000000;
			}
			.contact{
				width: 39rpx;
				height: 39rpx;
			}
		}
		
		.address_bg{
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			margin-top: 20rpx;
			align-items: center;
			.address{
				font-size: 28rpx;
				color: dimgray;
				flex: 1;
				display: flex;
				flex-direction: row;
				align-items: center;
				.address_icon{
					width: 23rpx;
					height: 29rpx;
					margin-right: 10rpx;
				}
			}
			.goto{
				width: 39rpx;
				height: 39rpx;
				margin-left: 30rpx;
				.to{
					width: 39rpx;
					height: 39rpx;
				}
			}
		}
	}
	
	.intro_bg{
		display: flex;
		flex-direction: column;
		background-color: white;
		padding: 30rpx 0rpx;
		margin: 30rpx 30rpx;
		border-radius: 10rpx;
		.title{
			display: flex;
			flex-direction: row;
			justify-content: center;
			.text{
				font-size: 30rpx;
				color: white;
				text-align: center;
				font-weight: bold;
				background-color: #c69c7b;
				width: 180rpx;
				height: 50rpx;
				border-radius: 25rpx;
				border: 2rpx solid #b18362;
				
			}
		}
		.content{
			margin-top: 20rpx;
			padding: 20rpx;
			border: 1rpx solid #f5e2ca;
			border-radius: 12rpx;
		}
	}
	
	
	.ticket_list{
		background-color: #fff;
		margin: 0rpx 30rpx;
		margin-top: 20rpx;
		display: flex;
		flex-direction: column;
		padding: 10rpx 30rpx 0rpx 30rpx;
		border-radius: 10rpx;
		.item{
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			padding-top: 20rpx;
			padding-bottom: 20rpx;
			border-bottom: 1rpx solid #f1f1f1;
			.cover{
				width: 200rpx;
				height: 150rpx;
				border-radius: 10rpx;
			}
			.right_info{
				margin-left: 20rpx;
				flex: 1;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				.title_bg{
					display: flex;
					flex-direction: column;
					.title{
						font-size: 28rpx;
						color: black;
						font-weight: bold;
					}
					.price{
						margin-top: 10rpx;
						font-size: 26rpx;
						color: darkorange;
					}
					.gray{
						color: darkgray;
					}
					.desc{
						font-size: 22rpx;
						color: gray;
						margin-top: 10rpx;
					}
				}
				.btn{
					display: flex;
					flex-direction: row;
					align-items: center;
					
					.buy{
						font-size: 24rpx;
						color: white;
						width: 140rpx;
						height: 60rpx;
						background-color: #509cf7;
						line-height: 60rpx;
						text-align: center;
						border-radius: 30rpx;
					}
					.not_buy{
						font-size: 24rpx;
						color: #c1c1c1;
						width: 140rpx;
						height: 60rpx;
						background-color: #f1f1f1;
						line-height: 60rpx;
						text-align: center;
						border-radius: 30rpx;
					}
				}
			}
		}
	}

	.card-box {
		// background-color: #fff;
		margin-top: 20rpx;

		.acea-row {
			display: flex;
			justify-content: space-between;
			width: 100%;

			.atterTxt {
				flex: 1;
				padding: 20rpx 0;
				text-align: right;
			}
		}
		
		.intro_bg{
			display: flex;
			flex-direction: row;
			padding: 30rpx;
			.title{
				font-size: 32rpx;
				color: #333;
				font-weight: bold;
				padding-bottom: 15rpx;
				border-bottom:  6rpx solid #509cf7;
				border-radius: 3rpx;
			}
		}
	}

	.notice-title {
		font-size: 28rpx;
		color: #333;
		// margin: 30rpx;
		padding: 30rpx;
		font-weight: bold;


	}

	.content {
		margin: 0 30rpx;
		padding: 0rpx 0rpx 40rpx 0rpx;
	}
	
	
	/****/
	
	.popup-cls{
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}
	
	.pop-info{
		width:90%;
		background-color: white;
		display: flex;
		flex-direction: column;
		border-radius: 20rpx;
		margin: 0 auto;
	}
	.pop-top{
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		font-size: 28rpx;
		color: #000000;
		font-weight: bold;
		margin-top: 20rpx;
		text-align: center;
		height: 40rpx;
	}
	
	.center{
		height: 200rpx;
		width:90%;
		margin: 30rpx;
	}
	.pop-content{
		height: 200rpx;
		font-size: 28rpx;
		color: #000000;
		text-align: center;
	}
	.bottom{
		display: flex;
		flex-direction: row;
		justify-content: center;
	}
	.agree-btn{
		flex: 1;
		margin-left: 40rpx;
		margin-right: 40rpx;
		height:80rpx;
		background-color: #01A1ED;
		border-radius: 40rpx;
		color: #FFFFFF;
		text-align: center;
		line-height: 80rpx;
		margin-bottom: 30rpx;
	}
</style>
